<script>
import { computed, defineComponent, inject, ref } from 'vue'
import { useWin } from '@Hooks/win'
import ProvinceWin from '@Components/areaController/components/provinceArea'
export default defineComponent({
  components: {
    ProvinceWin,
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return null
      },
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  emits: ['select'],
  setup(props, context) {
    let canShowChildren = ref(false)
    let hasCity = ref(false) //是否已加载区/市

    let selectedData = inject('selectedArea')

    let checkHandler = (_checkedKeys, e) => {}
    let province_prifx = props.info.adcode.substring(0, 2)
    let getSelectedData = computed(() => {
      return selectedData.data.filter((x) => {
        return x.adcode.substring(0, 2) == province_prifx
      })
    })

    let [provinceWin] = useWin({
      component: (
        <ProvinceWin
          info={props.info}
          onSelect={({ params }) => {
            context.emit('select', params)
            // console.log({ ...params })
          }}
          selectedData={getSelectedData.value}
        />
      ),
      attr: {
        title: '设置',
        zIndex: 999999,
      },
    })

    //点击查询单个省份
    let provinceHandler = () => {
      provinceWin({
        params: {
          selectedData: getSelectedData.value,
          type: props.type,
        },
      })
    }

    let groupSelectedData = computed(() => {
      let _province = getSelectedData.value.filter((x) =>
        /^\d{2}0{4}$/gi.test(x.adcode)
      )
      let _citys = getSelectedData.value.filter((x) =>
        /^\d{4}0{2}$/gi.test(x.adcode)
      )
      let district = getSelectedData.value.filter((x) => x.level == 'district')
      // console.log(getSelectedData.value)
      return (
        <>
          {_province.length > 0 && <span>{_province.length}省</span>}
          {_citys.length > 0 && _province.length == 0 && (
            <span>{_citys.length}市</span>
          )}
          {district.length > 0 && _province.length == 0 && (
            <span>{district.length}区/县</span>
          )}
        </>
      )
    })

    return {
      checkHandler,
      hasCity,
      // selected_ids,
      canShowChildren,
      provinceHandler,
      props,
      selectedData,
      getSelectedData,
      groupSelectedData,
    }
  },
  render() {
    return (
      <>
        <a-button
          type="link"
          primary
          onClick={this.provinceHandler}
          g={this.getSelectedData}
        >
          {this.props.info.name}
          {this.getSelectedData.length > 0 && (
            <span class="red">({this.groupSelectedData})</span>
          )}
        </a-button>
      </>
    )
  },
})
</script>
